<template>
<!-- 新增部门弹窗 -->
<el-dialog :title="formData.id ? '编辑部门' : '新增子部门'" :visible ="showDialog" @close='btnCancel'>
<!-- 表单组件 el-form -->
<!-- 匿名插槽 -->
<el-form label-width="120px" :model='formData' :rules='rules' ref="deptForm">
  <el-form-item label="部门名称" prop="name">
    <el-input style="width:80%" placeholder="1-50个字符" v-model="formData.name"></el-input>
  </el-form-item>
  <el-form-item label="部门编码" prop="code">
    <el-input style="width:80%" placeholder="1-50个字符" v-model="formData.code"></el-input>
  </el-form-item>
  <el-form-item label="部门负责人" prop="manager">
    <el-select style="width:80%" placeholder="请选择" v-model="formData.manager" @focus="getEmployeeSimple">
      <el-option v-for="item in people" :key="item.id" :label="item.username" :value="item.username">
    </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="部门介绍" prop="introduce">
    <el-input style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" v-model="formData.introduce"></el-input>
  </el-form-item>
</el-form>
<!-- /表单组件 el-form -->
 <!-- el-dialog有专门放置底部操作栏的 插槽  具名插槽 -->
  <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnOk">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </el-col>
  </el-row>
</el-dialog>
</template>

<script>
import {getDepartments ,addDepartments, getDepartDetail ,updateDepartments} from '@/api/departments'
import {getEmployeeSimple} from '@/api/employee'
export default {
    props: {
       showDialog:{
        type: Boolean,
        default: false
       } ,
       treeNode:{
        type: Object,
        default: null
       }
    },
    data () {
      const checkNameRepeat = async (rules,value,callback) => {
        const {depts} = await getDepartments()
        let isRepeat = false
        if(this.formData.id){ //编辑
          isRepeat = depts.filter(item => item.pid === this.treeNode.pid && item.id !== this.treeNode.id).some(item => item.name === value)
        }else{//新增
          isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
        }
        isRepeat ? callback(new Error(`同级部门下已经有${value}的部门了`)) : callback()
      }
      const checkCodeRepeat = async (rules,value,callback) => {
        const {depts} = await getDepartments()
        let isRepeat = false
        if(this.formData,id){//修改
          isRepeat = depts.filter(item => item.id !== this.treeNode.id).some(item => item.code === value)
        }else{//新增
          isRepeat = depts.some(item => item.code === value)
        }
        isRepeat ? callback(new Error(`组织架构中已经有部门使用${value}编`)) : callback()
      }
      return {
        formData: {
          name: '', //部门名称
          code: '', // 部门编码
          manager: '', // 部门管理者
          introduce: '', // 部门介绍
        },
        rules:{
          name:[{required: true , message: '部门名称不能为空' , trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' },
          {trigger: 'blur' , validator:checkNameRepeat}
          ],
          code:[{required: true , message: '部门编码不能为空' , trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' },
          {trigger: 'blur' , validator:checkCodeRepeat}
          ],
          manager:[{required: true , message: '部门负责人不能为空' , trigger: 'blur' }],
          introduce:[{required: true , message: '部门名称不能为空' , trigger: 'blur' },
          { trigger: 'blur', min: 1, max: 300, message: '部门介绍要求1-50个字符' }
          ]
          },
          people: []
        }     
    },
    methods: {
    // 绑定单个数据
    async getDepartDetail(id){
      this.formData = await getDepartDetail(id)
    },
     async getEmployeeSimple(){
        this.people = await getEmployeeSimple()
        // console.log(this.people);
      },
      // 点击确定时触发
      btnOk(){
        this.$refs.deptForm.validate(async isOk => {
          if(isOk){
              // 校验成功，可以提交 校验通过调用新增的接口
              // 添加父部门的id
              // await addDepartments({ ...this.formData, pid: this.treeNode.id })
              // 判断是否有id
              if(this.formData.id){
                //修改
                await updateDepartments(this.formData)
              }else{//新增
                  this.formData.pid =  this.treeNode.id
                  // console.log(this.formData);
                  await addDepartments(this.formData)
              }
             
              //新增成功之后 告诉父组件，重新拉取数据
              this.$emit('addDepts')
              // 关闭弹窗
              this.$emit('update:showDialog', false)
              // 关闭dialog的时候会触发el-dialog的close事件
          }
        })
      },
      // 取消时重置数据和校验
      btnCancel(){
      // 重置数据  因为resetFields 只能重置 表单上的数据 非表单上的 比如 编辑中id 不能重置 解决显示控制标题的问题
      this.formData = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
        // 关闭弹窗
        this.$emit('update:showDialog', false)
        // 重置校验
        this.$refs.deptForm.resetFields() // 重置校验字段 并且把文本框数据情况
      }
    }
    
}
</script>

<style>

</style>